<template>
	<view class="drawer-container">
	    <view class="custom-content">
	        <search-box
	            placeholderText="请输入仓库名称"
	            :searchValue="warehouseSearchVal"
	            @changeSearchVal="changeSearchVal"
	            @searchFn="searchFn" />
	        <view class="content-wrapper">
	            <mescroll-uni
	                ref="mescrollRef"
	                @init="mescrollInit"
	                :fixed="false"
	                :up="upOption"
	                @down="downRefresh"
	                @up="getNewData">
	                <checkbox-group @change="checkboxChange">
	                    <label class="content-item" v-for="item in warehouseList" :key="String(item.StockInfoNo)">
	                        <view class="">{{ item.StockInfoName }}</view>
	                        <checkbox
	                            :value="String(item.StockInfoNo)"
	                            :checked="item.isSelected"
	                            style="transform: scale(0.7)" />
	                    </label>
	                </checkbox-group>
	            </mescroll-uni>
	        </view>
	    </view>
	    <view class="bottom-wrapper">
	        <view class="reset-btn flex-center" @click="handleResetW">重置</view>
	        <view class="sure-btn flex-center" @click="handleSureW">确认</view>
	    </view>
	</view>
 
</template>

<script>
import { setReduce } from "@/utils/utils.js"
import { GetStock} from "@/service/api/erp.js"
export default {
	props: {
	    warehouseSelectData: {
	        type: Array,
	        default: [],
	    },
	},
    data() {
        return {
            pageNumber: 1,
            pageSize: 20,
			warehouseSearchVal:'',
			warehouseList:[],
			selectedWarehouse:[],
			params:[]
        }
    },
	
    computed: {
		
    },
	watch:{

	},
    created() {
    },
    mounted() {
        uni.$on("resetStockWarehouse", this.downRefresh)
    },
    unmounted() {
        uni.$off("resetStockWarehouse", this.downRefresh)
    },
    methods: {
        searchFn(val) {
			this.warehouseList = []
            this.changeSearchVal(val)
            this.mescroll.scrollTo(0, 0)
            this.mescroll.resetUpScroll()
        },
        checkboxChange(e) {
            const selectedWarehouse = this.warehouseList.filter((item) => e.detail.value.includes(item.StockInfoNo))
            console.log(selectedWarehouse)
            console.log(e.detail.value)
			this.selectedWarehouse = selectedWarehouse;
			this.params = e.detail.value;
        },
		handleResetW(){
			this.selectedWarehouse = [];
			this.params = [];
			this.warehouseList = []
			this.downRefresh()
			this.$emit('handleResetW')
		},
		handleSureW(){
			this.$emit('handleSureW',this.selectedWarehouse,this.params)
		},
        changeSearchVal(val) {
            this.warehouseSearchVal = val
        },
        getCustomList() {
            const params = {
                pageNumber: this.pageNumber,
                pageSize: this.pageSize,
                fullName: this.warehouseSearchVal,
            }
            GetStock(params).then((res) => {
                if (res.State == 1) {
                    this.mescroll.endByPage(res.Data.length, res.TotalAmout)
					this.warehouseList = this.warehouseList.concat(res.Data)
					this.warehouseList.forEach((item) => {
						this.$set(item, "isSelected", false)
						if(this.warehouseSelectData.includes(item.StockInfoNo)){
							this.$set(item, "isSelected", true)
						}
					})
                } else {
                    this.mescroll.endErr()
                }
            })
        },
        // 上拉加载
        getNewData(page) {
            this.pageNumber = page.num
            this.getCustomList()
        },
        // 下拉刷新
        downRefresh() {
            this.mescroll.scrollTo(0, 0)
            this.mescroll.resetUpScroll()
        },
    },
}
</script>

<style lang="scss">
	.drawer-container {
	    position: relative;
	    width: 100%;
	    height: 100%;
	    box-sizing: border-box;
	    background-color: $color-white;
	    color: $color-gray-1;
	
	    .bottom-wrapper {
	        position: absolute;
	        left: 0;
	        right: 0;
	        bottom: 20rpx;
	        z-index: 999;
	        height: 72rpx;
	        display: flex;
	        font-size: 28rpx;
	
	        view {
	            flex: 1;
	        }
	
	        .reset-btn {
	            background-color: $color-white;
	            border-top: 1rpx solid #f0f0f0;
	        }
	
	        .sure-btn {
	            background-color: $app-color-main;
	            color: $color-white;
	        }
	    }
	}
.custom-content {
    height: 100%;
    padding-top: 88rpx;
	padding-bottom: 72rpx;
	box-sizing: border-box;
	overflow: hidden;
    .content-wrapper {
       height: calc(100% - 120rpx);

        .content-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 28rpx;
            min-height: 78rpx;
            margin-left: 28rpx;
            margin-right: 24rpx;
            border-bottom: 1rpx solid $uni-border-bottom-color;
        }

        ::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
            color: $app-color-main;
        }

        ::v-deep uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
            border-color: $app-color-main;
        }
    }
}
</style>
